import { useSlateStatic, useReadOnly, ReactEditor } from "slate-react";
import { Transforms, Element as SlateElement ,Descendant} from "slate";
import style from "./index.css";
type Element = { checked: boolean; children: Descendant[] };
const CheckListItem = ({ attributes, children, element }) => {
  const editor = useSlateStatic();
  const readOnly = useReadOnly();
  const { checked } = element;
  return (
    <div {...attributes} className={style.container}>
      <span contentEditable={false}>
        <input
          type="checkbox"
          checked={checked}
          onChange={(event) => {
            const path = ReactEditor.findPath(editor as ReactEditor, element);
            const newProperties: Partial<Element> = {
              checked: event.target.checked,
            };
            Transforms.setNodes(editor, newProperties, { at: path });
          }}
        />
      </span>
      <span
        contentEditable={!readOnly}
        suppressContentEditableWarning
        style={{
          opacity: checked ? 0.666 : 1,
          textDecoration: checked ? "none" : "line-through",
        }}
      >
        {children}
      </span>
    </div>
  );
};

export default CheckListItem;
